<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1.引入bootstrap的css样式-->
    <link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.min.css">
    <!--1.1)添加分页的样式库-->
    <link rel="stylesheet" href="plugins/angularjs/pagination.css">
    <!--2.引入jquery的js库-->
    <script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
    <!--3.引入bootstrap的js库-->
    <script src="plugins/bootstrap/js/bootstrap.min.js"></script>
    <!--4.引入angularjs的库-->
    <script src="plugins/angularjs/angular.min.js"></script>
    <!--4.1)添加分页的js库-->
    <script src="plugins/angularjs/pagination.js"></script>
    <!--5.自定义的js代码-->
    <script>
        //5.1 定义模块
        var app = angular.module("app",['pagination']);
        //5.2 定义控制器
        app.controller("studentController",function ($scope,$http) {
            // $scope.paginationConf={
            //
            // }

            // 5.3查询学生信息
            $scope.findAll= function () {
                $http.get("./student/list.do").success(function (response) {
                    $scope.list = response;
                })
            }

            // 5.4 转换日期格式
            $scope.converDate=function (riqi) {
                //5.4.1 将日期字符串转为js的日期对象
                var date = new Date(riqi);

                var year = date.getFullYear(); //得到日期的年份
                var month = date.getMonth()+1; //得到月份
                var day = date.getDate(); //得到天数

                return year + "年" + month + "月" + day + "日";
            }

            $scope.searchStudent=function () {
                // alert("查询按钮");
                // $scope.search($scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);
                // $http.get("./student/search.do").success(function (response) {
                //     $scope.list = response;
                // })

                $http.post("./student/search.do?",$scope.searchEntity).success(function (response) {
                    $scope.list = response;
                })

            }
        })
    </script>
</head>
<body ng-app="app" ng-controller="studentController" ng-init="findAll()">
<!--ng-init 调用 ng-controller的studentController层里的findAll()-->

<div class="container">
    <div class="panel panel-info">
        <div class="panel-heading">
            <div class="panel-title">
                <h1>学生信息</h1>
            </div>
        </div>
        {{searchEntity}}
        <div class="panel-body">
            <table class="table table-hover table-bordered table-striped">
                <tr>
                    <td colspan="8" style="text-align: left;">
                        <form class="form-inline">
                            <!--增加一个新学生-->
                            <button ng-click="addStudent()" class="btn btn-success" >增加</button>
                            <!--模糊查询-->
                            <input type="text" class="form-control"  ng-model="searchEntity.sname"  placeholder="请输入姓名……">
                            <input type="text" class="form-control"  ng-model="searchEntity.addr" placeholder="请输入住址……">
                            选择班级：
                            <select class="form-control" ></select>
<!--在表达式中使用数组或对象来自动生成一个select中的option列表。ng-options与ng-repeat很相似，很多时候可以用ng-repeat来代替ng-options-->
                            <!--<a  href="javascript:searchStudent()" class="btn btn-success">查询</a>-->
                            <button ng-click="searchStudent()" class="btn btn-info" >查询</button>
                        </form>
                </td>
            </tr>
            <tr>
                <td>学号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
                <td>住址</td>
                <td>班级</td>
                <td>出生日期</td>
                <td>操作</td>
            </tr>
            <tr ng-repeat="stud in list">
                <td>{{stud.sid}}</td>
                <td>{{stud.sname}}</td>
                <td>{{stud.sex}}</td>
                <td>{{stud.age}}</td>
                <td>{{stud.addr}}</td>
                <td>{{stud.cname}}</td>
                <td>{{converDate(stud.birth)}}</td>
                <td>
                    <a href="" class="btn btn-success btn-sm">修改</a>
                    <a href="" class="btn btn-danger btn-sm">删除</a>
                </td>
            </tr>
        </table>
        <div class="panel-footer" style="text-align:center;">
            &copy;深圳泽林
        </div>
    </div>
        </div>
</div>

</body>
</html>